<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="mt-200">
			<view v-if="coupons.length!=0" class="d-flex" v-for="(i,index) in coupons" :key="index" style="height: 180rpx; width: 90%; margin: 0 auto 30rpx;">
				<view class="Cover rounded15">
					<view class="d-flex d-flex-bottom d-flex-center colorfff" style="margin-top: 25rpx;">
						<view style="margin-bottom: 10rpx;">￥</view>
						<view class="font-bold" style="font-size: 70rpx;">{{i.amount}}</view>
					</view>
					<view class="font20 mt-1 colorfff text-center">满{{i.limitUseAmount==0?i.amount:i.limitUseAmount}}元可用</view>
				</view>
				<view class="Coupon_item position-relative d-flex-middle d-flex bg-fff rounded15" style="overflow: hidden;">
					<view class="d-flex d-flex-column ml-3" style="flex: 1;">
						<view class="font30 mt-1">{{i.name}} X {{i.count}}张</view>
						<!-- <view class="font20 mt-1 mb-2" style="color: #b5b5b5;">{{i.limitResourceTypes==null?'全品类':i.limitResourceTypes}}</view> -->
						<view class="font20" style="color: #b5b5b5;">有效期:{{i.assetsExpireTime}}到期</view>
					</view>
					<view class="position-absolute" style="right: -18rpx; bottom: -18rpx;">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%B7%B2%E5%A4%B1%E6%95%88.png" style="width: 120rpx; height: 120rpx;"></image>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { FirstChangeApi } from "../../http/firstChange";
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '历史优惠券',
				coupons:[]
			}
		},
		components:{TitleBarVue},
		onLoad() {
			this.GetCoupon(-1);
		},
		methods: {
			async GetCoupon(state) {
				let params = {
					state : state
				}
				let res = await FirstChangeApi.GetCoupon(params)
				res.records.forEach(i=>{
					this.coupons.push(i);
				})
				console.log(this.coupons);
			},
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.Cover {
		width: 130rpx;
		height: 100%;
		border-right: 1px dashed #f5f5f5;
		background: #d6d6d6;
	}
	.Coupon_item {
		flex: 1;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
	}
}
</style>
